Vue Templates
Vue-তে একটি টেমপ্লেট হল যাকে আমরা আমাদের Vue অ্যাপ্লিকেশনের HTML অংশ বলি।
<টেমপ্লেট> ট্যাগটি তারপরে *.vue ফাইলে ব্যবহার করা হয় আমাদের কোডকে আরও ভালোভাবে গঠন করতে।
Vue ইন্সট্যান্সে কনফিগারেশন বিকল্প হিসাবে একটি টেমপ্লেট ব্যবহার করা এবং ভিতরে HTML কোড রাখা সম্ভব।
The Vue Template
কনফিগারেশন বিকল্প হিসাবে 'টেমপ্লেট' ব্যবহার করে একটি উদাহরণ দেখা যাক। এটি একটি সাধারণ উদাহরণ যেখানে HTML অংশটি কনফিগারেশন বিকল্প 'টেমপ্লেট'-এ সরানো হয়েছে:
Example
<div id="app"> এর ভিতরের HTML বিষয়বস্তুকে '...` প্যাকটিক উদ্ধৃতিতে আবদ্ধ করে কনফিগার অপশন 'টেমপ্লেট'-এ সরানো হয়েছে। HTML এর একাধিক লাইন একটি একক প্যাকটিক উদ্ধৃতির মধ্যে লেখা যেতে পারে।
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:
`<h1>{{ message }}</h1>
<p>This is a second line of HTML code, inside back tick quotes</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>Single File Components (SFCs)
আপনি উপরের কোড উদাহরণে দেখতে পাচ্ছেন, আমাদের Vue অ্যাপ্লিকেশনের HTML অংশটি Vue উদাহরণে সংগ্রহ করা যেতে পারে, তবে এটি HTML ফাইলের একটি ওভারভিউ পাওয়া সহজ করে না।
একটি ভাল ওভারভিউ পেতে, বড় প্রকল্পগুলি পরিচালনা করা সহজ করতে এবং আরও ভাল উন্নয়ন পরিবেশ পেতে, আমরা এখন SFCs বা *.vue ফাইলগুলিতে আমাদের Vue কোড লেখার দিকে স্যুইচ করব৷
সমস্ত *.vue ফাইল মাত্র তিনটি অংশ নিয়ে গঠিত:
- <টেমপ্লেট> এইচটিএমএল সামগ্রী সহ
- আমাদের Vue কোডের জন্য <script>
- <style> CSS স্টাইলিং লিখে
<template>
এইচটিএমএল স্ট্রাকচার এবং কম্পোনেন্টের মার্কআপ
<script>
Vue JavaScript লজিক, ডেটা, পদ্ধতি এবং জীবনচক্র হুক
<style>
এলিমেন্টের জন্য CSS স্টাইলিং, স্ট্যাটিক বা স্কোপড
দ্রষ্টব্য:
কিন্তু আমাদের প্রজেক্টে *.vue ফাইল ব্যবহার করার আগে আমাদের সিস্টেমকে অন্যভাবে সেট আপ করতে হবে। এই টিউটোরিয়ালের পরবর্তী পৃষ্ঠাগুলি এটি ব্যাখ্যা করবে।
<!-- Example of a *.vue file structure -->
<template>
<div class="example">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My Component',
description: 'This is a Vue component'
}
}
}
</script>
<style scoped>
.example {
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>Vue Exercises
Vue টেমপ্লেট সম্পর্কে আপনার জ্ঞান পরীক্ষা করতে এই টিউটোরিয়ালটি ব্যবহার করে দেখুন।